<template>
    <div class="menu_header">
        <div class="topheader">
            <div class="icon" @click="isCollapse = !isCollapse">
                <el-icon>
                    <Expand />
                </el-icon>
                <div class="txt">首页</div>
            </div>

            <div class="ic-right">
                <el-tooltip class="box-item" effect="dark" content="文档内容" placement="bottom">
                    <el-link href="http://doc.ruoyi.vip/ruoyi-vue/" target="_blank">
                        <img src="@/assets/icons/svg/question.svg" alt="">
                    </el-link>
                </el-tooltip>


                <el-button link @click="quanFn" class="fullscreen">
                    <img src="@/assets/icons/svg/fullscreen.svg" alt="">
                </el-button>


                <el-tooltip class="box-item" effect="dark" content="布局大小" placement="bottom">
                    <el-dropdown :hide-on-click="false" trigger="click" class="boxdown">
                        <span class="el-dropdown-link">
                            <el-icon class="el-icon--right"><img src="@/assets/icons/svg/size.svg"></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>Default</el-dropdown-item>
                                <el-dropdown-item disabled>Mendium</el-dropdown-item>
                                <el-dropdown-item divided>Small</el-dropdown-item>
                                <el-dropdown-item divided>Mini</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-tooltip>


                <el-dropdown :hide-on-click="false" trigger="click">
                    <span class="lgo">
                        <img src="@/assets/images/logo.png">
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item divided>布局设置</el-dropdown-item>
                            <el-dropdown-item divided>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <div class="btmheader"></div>
    </div>
</template>

<script setup lang="ts">
import { inject } from "vue";
import { Expand, QuestionFilled, FullScreen, Delete, CaretBottom } from "@element-plus/icons-vue";
// 全屏显示
import screenfull from 'screenfull'
import { hide } from "@popperjs/core";
const isCollapse = inject("isCollapse");

const quanFn = () => {
    screenfull.toggle()
}

</script>

<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
}

.menu_header {
    line-height: 60px;

    .topheader {
        display: flex;
        justify-content: space-between;
    }

    .icon {
        display: flex;
        align-items: center;

        .txt {
            padding-left: 15px;
            color: #97a8be;
        }

        :deep(.el-icon) {
            font-size: 20px;
            color: #000;
        }
    }
}

.example-showcase .el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

.el-icon--right {
    margin-top: 25px;
}

.ic-right {
    position: relative;

    .box-item {
        width: 110px;
        margin-top: 50px;
    }

    // .ic-right:hover::after {
    //     content: attr(data-title);
    //     display: inline-block;
    //     padding: 10px 14px;
    //     border: 1px solid #ddd;
    //     border-radius: 5px;
    //     color: #333;
    //     background-color: #EEE;
    //     position: absolute;
    //     width: 250px;
    //     line-height: 18px;
    //     white-space: pre-wrap;
    // }

    img {
        width: 20px;
        height: 20px;
        // margin-left: 15px;
        font-weight: 400;
    }
}

.fullscreen {
    margin-left: 15px;
}

.boxdown {
    margin-left: 15px;
}

.lgo {
    margin-left: 15px;

    img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        margin-top: 10px;
    }
}

.btmheader {
    width: 100%;
    height: 35px;
    background-color: #fff;
    border-top: 0.1px solid #cccccc50;
    border-bottom: 1px solid #ccc;
}
</style>
